<template>
  <view class="signature-container">
    <view>
      <web-view :src="src" @message="getMsg"></web-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: '',
      img: '',
      orderId: '', // 订单确认id
      // 离开当前页面的逻辑条件
      options: {
        type: 'before', // before为回退页面， after为下一页
        count: 1, // 回退页面的页数
        url: '', // 下一页的页面路径
        fnName: '', //接口
      },
      back: 0, //是否显示关闭按钮 0 不显示 1 返回到店单详情的步数
      backPress: true, //是否出页面返回上一页事件
      datas: {}, //预检上检订单数据
    }
  },

  onLoad(e) {
    this.datas = this.$store.state.afterSales.signData
    if (this.datas && this.datas.type === 2 && this.datas.figure === 0) {
      this.src =
        'https://files.yzsheng.com/shareH5/Signature/index.html?type=1&t=' +
        new Date().getTime()
    } else {
      this.src =
        'https://files.yzsheng.com/shareH5/Signature/index.html?t=' +
        new Date().getTime()
    }

    this.backPress = true

    this.options = JSON.parse(e.typeOptions)
    console.log(this.options)
    this.orderId = e.id
    this.back = e.back ? Number(e.back) : 0
    this.$nextTick(() => {
      setTimeout(() => {
        uni.setNavigationBarTitle({
          title: e.title || '客户签字',
        })
      }, 1000)

      // #ifdef APP-PLUS
      let webview = this.$mp.page.$getAppWebview()
      if (!this.back) {
        webview.setTitleNViewButtonStyle(0, {
          text: '',
          width: 0,
        })
      }
      // #endif
      // #ifdef H5
      let view = document.querySelectorAll('.uni-page-head .uni-page-head-btn')
      if (!this.back) {
        console.log(view)
        view[1].childNodes[0].innerHTML = ''
        view[1].style.width = '0'
      }
      // #endif
    })
  },

  created() {
    // #ifdef H5
    this.getMsgH5()
    // #endif
  },

  //返回按钮
  onBackPress() {
    if (this.backPress) {
      const signData = this.$store.state.afterSales.signData
      if (signData.type === 0 && signData.figure === 0) {
        //预检 技师签字
        if (this.back === 1) {
          uni.redirectTo({
            url:
              '/pages_afterSales/visualCheck/visualCheckOthers?back=1&id=' +
              signData.id,
          })
          return true
        }
      }
    }

    return false
  },

  //关闭按钮
  onNavigationBarButtonTap() {
    this.backPress = false
    uni.navigateBack({
      delta: 1,
    })
  },

  methods: {
    getMsg(e) {
      console.log('看看', e.type)
      this.uploadImg(e.detail.data[0].img)
    },

    handleMsgH5(e) {
      console.log(110)
      if (e.origin !== 'https://files.yzsheng.com') return
      if (!e.data.data) return
      this.uploadImg(e.data.data.arg.img)
    },

    getMsgH5() {
      //监听消息反馈
      console.log('看看监听')
      window.addEventListener('message', this.handleMsgH5, false)
    },

    // 离开当前页面的逻辑处理
    handleNavPage() {
      console.log(this.options)
      if (this.options.type === 'before') {
        uni.navigateBack({
          delta: this.options.count,
        })
      } else {
        uni.redirectTo({
          url: this.options.url,
        })
      }
    },

    //上传图片
    async uploadImg(img) {
      uni.showLoading()
      const filename = 'signbase64' + Math.ceil(Math.random() * 1000000000)
      try {
        const res = await this.$api.files.uploadConfigBase64({
          base64str: img,
          _upyunPath: '/base64file',
          flag: 100,
          filename: filename,
        })
        this.img = res.data.urladdress
        let that = this
        that[this.options.fnName](() => {
          uni.hideLoading()
          uni.$emit('userConfirm', {
            userName: this.img,
          })
          this.handleNavPage()
        })
      } catch (error) {
        console.log(error)
        uni.showToast({
          title: '图片上传失败，请稍后重试',
          icon: 'none',
        })
      }
    },

    //预检/上检签名
    async arrvialOrderSign(callback) {
      if (this.datas.figure === 0 && this.datas.type === 0) {
        this.$store.commit('afterSales/setSignData', {
          id: this.datas.id,
          type: this.datas.type,
          figure: 1,
        })
      }
      try {
        const res = await this.$api.afterSales.addSignature({
          order_Arrive_Store_Id: this.datas.id,
          type: this.datas.type, //0预检,1上检测，2质检交车报告
          figure: this.datas.figure, //0技师，1客户
          url: this.img,
        })
        callback()
      } catch (error) {}
    },

    //质检签名 预检上检客户签字
    qualitySign(callback) {
      callback()
    },

    // 提交订单签名
    async submitOrderSign(callback) {
      console.log('签字确认')
      try {
        const res = await this.$api.afterSales.QuatationSure({
          orderId: this.orderId,
          signImg: this.img,
          type: 0, //0到面签字 ，1客户远程签字
        })
        callback()
      } catch (err) {
        console.log(err)
      }
    },
  },

  beforeDestroy() {
    console.log('销毁之前')
    // #ifdef H5
    window.removeEventListener('message', this.handleMsgH5)
    // #endif
  },
}
</script>

<style lang="scss" scoped>
.signature-container {
}
</style>
